<template>
  <div class="app">
    <div class="title">日志管理</div>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
export default {
  data() {
    return {
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      form: { dictName: null, dictType: null, remark: null },
      tableData: [],
      columns: [
        {
          title: "字典名称",
          dataIndex: "dictName",
          key: "dictName",
        },
        {
          title: "字典类型",
          dataIndex: "dictType",
          key: "dictType",
        },
        {
          title: "备注",
          dataIndex: "remark",
          key: "remark",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      const url = "/government-platform-center/dictType";
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data;
          }
        });
    },
    editFn(text, record) {
      console.log(text, record);
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/dictType/deleteById?id=${text.dictId}`;
          that.$axios.post(url).then((res) => {
            if (res.data.code == 0) {
              that.getList();
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    goData(text, record) {
      this.$router.push({
        path: `/dictData`,
        query: { dictType: text.dictType },
      });
    },
    addFn() {
      this.dialogVisible = true;
    },
    putDict() {
      if (!this.form.id) {
        const url = "/government-platform-center/dictType";
        this.$axios
          .post(url, this.form, {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.reSetForm();
              this.dialogVisible = false;
            }
          });
      }
    },
    reSetForm() {
      this.form = { dictName: null, dictType: null, remark: null };
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;

  background: #fff;
  padding: 20px;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>
